<template>
  <div>
    <header class="site-header jumbotron">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <h1>请发表对Vue的评论</h1>
          </div>
        </div>
      </div>
    </header>
    <div class="container">
      <!-- 添加Add和List组件标签 -->
      <Add :addComment="addComment" />
      <!-- 组件通信注意冒号是变量没有就是一个文本 -->
      <List :comments="comments" :deleteComment="deleteComment" />
    </div>
  </div>
</template>

<script>
/* ./components/Add 表示当前路径下的 注意路径和单词有没有写对*/
import Add from "./components/Add.vue";
import List from "./components/List.vue";
export default {
  data() {
    return {
      comments: [
        //数据在哪个组件，更新数据的行为（方法）就应该定义在哪个组件
        {
          name: "刺猬",
          content: "啦啦啦啦啦啦啦啦",
        },
        {
          name: "苏轼",
          content: "竹杖芒鞋轻胜马",
        },
        {
          name: "爱因斯坦",
          content: "何妨吟啸且徐行",
        },
      ],
    };
  },
  methods: {
    // 添加评论
    addComment(comment) {
      this.comments.unshift(comment);
    },
    //删除指定下标的评论
    deleteComment(index) {
      this.comments.splice(index, 1); //index是下标，后面是删除的个数,注意comments而不是comment，comments是对象，comment是对象的值，没有下标
    },
  },
  //映射组件标签
  components: {
    Add,
    List,
  },
};
</script>

<style>
</style>